<template>
  <div class="search-history">
    <!-- title -->
    <div class="search-history__title">检索历史</div>
    <!-- tabs  -->
    <el-tabs v-model="activeName" type="card" @tab-click="tabsClickHandle">
      <el-tab-pane label="历史记录" name="history">
        <table-data-history/>
        <TableDataHistory   v-show= "false" ref="MyTableDataHistory"></TableDataHistory>  
      </el-tab-pane>
      <el-tab-pane label="收藏记录" name="collection">
         <table-data />
        <TableData   v-show= "false" ref="MyTableData"></TableData>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  import TableData from './table-data'
  import TableDataHistory from './table-data-history'
  export default {
    name: 'SearchHistory',
    data() {
      return {
        activeName: 'history'
      }
    },
    methods: {
        tabsClickHandle(tab) {
            if(this.onePaneName == "history"){              // 历史记录
                console.log("--------------------- tabsClickHandle 历史记录 -------------------")
                //this.$refs.MyTableData.changePageAllValue(tab.paneName);
            }else if(this.onePaneName == "collection"){     // 收藏记录
                console.log("--------------------- tabsClickHandle 收藏记录 -------------------")
                //this.$refs.MyTableDataHistory.changePageAllValue(tab.paneName);
            }
       }
    },
    components: { TableData, TableDataHistory }
  }
</script>

<style lang="scss" scoped>
.search-history {
  width: 1200px;
  margin:auto;
  font-size: 16px;
  font-family: "PingFang SC",宋体!important;

  &__title {
    font-size: 24px;
    color: #303133;
    font-weight: 700;
    margin: 20px 0;
  }
}
</style>
<style lang="scss">
  .search-history {
    font-family: "PingFang SC",宋体!important;
    /*  el-*tabs样式 */
    .el-tabs {
      &__header {
        margin: 0;
      }

      &__content {
        background: white;
        border: 1px solid #e4e7ed;
        border-top: none;
        padding: 20px;
      }
    }

    .el-tabs--card>.el-tabs__header .el-tabs__item {
      border: 1px solid #e4e7ed;
      border-radius: 10px 10px 0 0;
      margin-right: 10px;
      font-size: 16px;
      font-weight: 700;
      background: #ebeef5;
      color: #2d54b8;
    }

    .el-tabs--card>.el-tabs__header .el-tabs__nav {
      border: none;
    }

    .el-tabs--card>.el-tabs__header .el-tabs__item:first-child {
      border-left: 1px solid #E4E7ED
    }

    .el-tabs--card>.el-tabs__header .el-tabs__item.is-active {
      background: white;
      color: #303133;
      border-bottom-color: #fff;
    }
  }
</style>
